<!-- 这是图片分享的组件 -->
<template>
  <div>
<van-tabs @click="listArr">
  <van-tab v-for="item in titleList" :key="item.id" :title="item.title" :name="item.id" >
    <ul>
      <li v-for="item in listCon" :key="item.id" :name="item.id" @click="info">
        <van-image lazy-load :src="item.img_url"/>
        <div class="word">
            <p v-html="item.content"></p>
            <p v-html="item.zhaiyao"></p>
            <p>{{item.id}}</p>
        </div>
      </li>
    </ul>
  </van-tab>
</van-tabs>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  created () {
    Axios.get('/api/getimgcategory').then(res => {
      if (res.data.status === 0) {
        res.data.message.unshift(this.allList)
        this.titleList = res.data.message
      } else {
        alert('加载失败')
      }
    })
    Axios.get('/api/getimages/' + this.id).then(res => {
      console.log(res)
      this.listCon = res.data.message
    })
  },
  data () {
    return {
      titleList: [],
      allList: {
        title: '全部',
        id: '0'
      },
      id: '0',
      listCon: ''
    }
  },
  methods: {
    info (name) {
      this.$router.push('/photo/info/')
      var id = name.path[2].children[1].lastChild.outerText
      window.localStorage.setItem('id', id)
    },
    listArr (name, title) {
      this.id = name
      console.log(name)
      Axios.get('/api/getimages/' + this.id).then(res => {
        console.log(res)
        this.listCon = res.data.message
      })
    }
  }
}
</script>

<style scoped>
ul{
    padding: 0 10px;
}
li{
    position: relative;
    width: 100%;
    height: 300px;
    margin: 10px 0;
    border-radius: 5px;
    overflow: hidden;
    min-height: 200px;
    list-style: none;
}
.van-image{
  width: 100%;
}
.word{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.4);
    color: #fff;
    padding: 0 10px;
    height: 75px;
}
p{
    margin: 5px 0;
    font-size: 12px;
}
</style>
